<template>
  <div class="app_content_container">
    <Breadcrumb :items="[{ label: '宿主机列表', path: '/mgmt/host-list' }, name]" />
    <div class="search_box">
      <Tabs v-model="activeKey" :list="hostDetailList" @tabChange="tabChange">
        <ga-tab-pane key="secure">
          <template #title>安全<ga-badge class="badge_style" :count="6" /></template>
        </ga-tab-pane>
      </Tabs>
      <component :is="componentName" :id="id"></component>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { hostDetailList } from "@/constant";

const route = useRoute();
const router = useRouter();
const { id } = route.params;
const { name, tab } = route.query;
const activeKey = ref(tab || "overview");
const componentName = ref(null);
// 加载组件
const loadModule = async (moduleName) => {
  // import 后面是文件路径
  const module = await import(`./${moduleName}.vue`);
  componentName.value = module.default;
};
// 处理方法
const tabChange = (val) => {
  loadModule(val);
  router.replace({
    path: route.fullPath,
    query: { ...route.query, tab: val },
  });
};
onMounted(() => {
  loadModule(activeKey.value);
});
</script>

<style lang="scss" scoped>
.badge_style {
  vertical-align: middle;
  margin-left: 8px;
}
</style>
